﻿<template>

    <!-- share mask s -->
    <div class="share_mask" v-show="share_mask_show" v-on:click="share_close">
      <div class="share_w">
        点击分享哦<br/>
        (｡・`ω´･)
      </div>

      <div class="wrap_arrow_share">
        <div class="arrow_share"></div>
        <div id="triangle-up"></div>
      </div>


    </div>
    <!-- share mask e -->

</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';

  export default {
    name: 'wx_share_temp',
    data () {
      return {
        mes:"",
        share_mask_show:false
      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
      share_close:function () {
        this.share_mask_show =  false;
      },
      share_show:function () {
        this.share_mask_show = true;
      }


    },
    components: {

    },
    mounted: function () {

    },

  }
</script>

<style scoped>
/*share_mask s*/
.share_mask{
  width:100%;

}

/*share_mask e*/
  /*share mask s*/
  .wrap_arrow_share{
    position:relative;
  }
  #triangle-up {
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #ffbc85;
    position: absolute;
    right: 9%;
    top: 0.9rem;
    transform: rotate(30deg)
  }
  .arrow_share {
    width: 1rem;
    height: 6rem;
    background-color: #ffbc85;
    position: absolute;
    top: 1rem;
    right: 20%;
    transform: rotate(30deg);
  }
  .share_w {
    font-size: 1.5rem;
    text-align: center;
    top: 33%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    color: #fff;
  }
  .share_mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    line-height:1.2;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
  }
  /*share mask e*/
</style>
